<template>
  <!-- 登录页面 -->
  <div>
    <div class="logo-wrap w">
      <router-link to="/">
        <img class="logo-img" src="../../static/img/logo.png" alt="">
      </router-link>
        <!-- <p>欢迎登录</p> -->
      </div>
        <div class="container-wrap">
         <img src="../../static/img/5e5b07e623de3.jpg" class="container-bg" alt=""></img>
         <Authen type="Register"/>
    </div>
  </div>

  </template>

  <script>
  import store from '@/vuex/store';
  import { mapMutations, mapActions } from 'vuex';
  import Authen from "@/components/authentication"
  export default {
    name: 'Register',
    data () {
      return {
        formDate: {
          username: '',
          password: ''
        },
        ruleInline: {
          username: [
            { required: true, message: this.$t('请输入手机号'), trigger: 'blur',  transform(value) {
              return value.trim();
            },}
          ],
          password: [
            { required: true, message: this.$t('请输入密码'), trigger: 'blur' },
            { type: 'string', min: 6, message: this.$t('密码不能少于6位'), trigger: 'blur' }
          ]
        }
      };
    },
    components:{
      Authen
    },
    methods: {
      ...mapActions(['login']),
      handleSubmit (name) {
          const {formDate:{username:phone,password}} = this
          if(!phone){
           return this.$Message.error(this.$t('请输入手机号'))
          }
          if (!/^\d{5,15}$/.test(phone)){
            return this.$Message.error(this.$t('请正确的手机号'))
          }
        this.login({phone,password})
      }
    },
    store
  };
  </script>

  <style lang="scss" scoped>
  .container{
    &-wrap{
    width: 100%;
    margin: 0 auto;
    height: 545px;
    position: relative;
    overflow: hidden;
    }
    &-bg{
      position: absolute;
      left: 0;
      top:0;
      width: 100%;
    }
  }

  .login-container {
    position: absolute;
    right: 200px;
  }

  .logo{
    &-wrap{
      padding:10px 0
    }
    &-img{
      width:150px
    }

  }

  .form{
    &-box{
    padding:40px 50px;
    margin: 20px auto;
    background-color: #Fff;
    }
  }
  .main-btn{
   height: 50px;
   background-color: #e2231a;
   border-radius: 0;
  }
  .bottom{
    text-align: center;
    color:#bcbcbc;
    &-link{
      color:#e2231a;
    }
  }
  </style>
